<section class="gh-canvas">
    <form class="mb10 member-basic-info-form" {{action (perform "save") on="submit"}}>
        <GhCanvasHeader class="gh-canvas-header">
            <h2 class="gh-canvas-title" data-test-screen-title>
                {{#link-to "members" data-test-link="members-back"}}Members{{/link-to}}
                <span>{{svg-jar "arrow-right"}}</span>
                {{#if member.name}}
                    {{member.name}}
                {{else}}
                    {{member.email}}
                {{/if}}
            </h2>
        </GhCanvasHeader>
        <div class="flex items-center mb10 bt b--lightgrey-d1 pt8">
            <GhMemberAvatar @member={{member}} @sizeClass={{'f-headline fw4 lh-zero'}} class="w18 h18 mr4" />
            <div>
                <h3 class="f2 fw5 ma0 pa0">
                    {{if member.name member.name member.email}}
                </h3>
                <p class="f6 pa0 ma0 midgrey">
                    {{#if member.name}}
                        <span class="darkgrey">{{member.email}}</span> – 
                    {{/if}}
                    Member since {{this.subscribedAt}}
                </p>
            </div>
        </div>
        {{gh-member-settings-form member=member
            setProperty=(action "setProperty")
            isLoading=this.isLoading
            showDeleteTagModal=(action "toggleDeleteTagModal")}}
    </form>
        <button
            type="button"
            class="gh-btn gh-btn-red gh-btn-icon mt3"
            {{action (toggle "showDeleteMemberModal" this)}}
            data-test-button="delete-member"
        >
            <span>Delete member</span>
        </button>
</section>

{{#if showDeleteMemberModal}}
    {{gh-fullscreen-modal "delete-member"
        model=(hash member=member onSuccess=(action "finaliseDeletion"))
        close=(action (toggle "showDeleteMemberModal" this))
        modifier="action wide"}}
{{/if}}
